<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;      
        }

        div{
            width: 500px;
            height: 500px;
            margin: 30px;
            background-color: skyblue;
            overflow: hidden;
        }
        p{
          width: 300px;
          height: 300px;
          margin: 30px;
          background-color: orange; 
          overflow: hidden; 
          position: relative;
        }

        span{
           display: block;
           width: 100px;
           height: 100px;
           /* margin: 30px; */
           position: absolute;
           left: 30px;
           top: 30px;
           background-color: pink; 
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>

            </span>
        </p>
    </div>
    <script>
        // 操作元素偏移量

        // 1、offset（）
        // 获取元素相对于页面左上角坐标位置
        // 注意：返回值是一个对象的数据类型{top: 30, left: 30}
        console.log('div:',$('div').offset())
        console.log('p:',$('p').offset())
        console.log('span:',$('span').offset())

        // 2、position（）
        // 获取的就是元素的定位位置
        // 注意：如果你设置的是right和bottom，会自动帮你换算成top和left
        console.log($('span').position())

    </script>
</body>
</html>